<template>
	<view class="content">
		<view class="p-t-30">
			<view class="card">
				<view class="question-title color-3E80E5 fs-32 m-t-26">
					提问内容
				</view>
				<view class="question m-t-34">
					<textarea class="question-content fs-26" v-model="chats[0].question" :placeholder="placeholder"
						placeholder-class="color-CCCCCC">
					</textarea>
					<view class="flex justify-end gap-16 m-t-26">

						<view class="question-option flex-center" @click="parse(0)">
							粘贴
						</view>
						<view class="question-option primary flex-center" @tap="checkLogin()&&submit()">
							提问
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p-t-85">
			<view class="card relative">
				<image class="AI-img" src="../../static/aiquestion/man-02-top@3x.png" mode=""></image>
				<view class="flex align-center answer-title m-l-180">
					<view class="flex color-3E80E5 fs-40">

						AI解答
					</view>
					<view class="flex justify-end flex-1">
						<view class="answer-option flex-center" @click="copy(chats[0].answer)">
							复制
						</view>
					</view>
				</view>
				<view class="answer m-t-14">
					<view class="answer-content fs-26" v-html="chats[0].answer">
					</view>
				</view>
			</view>
		</view>

		<view style="position: relative;">
			<by-nike-avtar ref="login"></by-nike-avtar>
		</view>
	</view>
</template>

<script>
	import {
		putQuestionsTo
	} from '../../API/aichat.js'
	export default {
		data() {
			return {
				placeholder: "输入需要AI为你创作的文本主要内容及要求,如:一个关于戒指的小红书产品文案，要求以网红种草博主的口吻，博主身份为网红女生，文案中最好多带一些emoj表情",
				aiplaceholder: '输入你的关键词，小助手将会为你生成需要的文案。',
				chats: [{
					question: "",
					answer: "输入你的关键词，<br/>小助手将会为你生成需要的文案。"
				}],
				function_id: 1,
				title: '朋友圈文案',
			}
		},
		onShow() {
			let pages = getCurrentPages();
			let options = (pages[pages.length - 1]).options;
			if (options.function_id) {
				this.function_id = options.function_id;
			}
			if (options.title) {
				console.log(options.title)
				setTimeout(()=>{
					uni.setNavigationBarTitle({
						title:options.title
					})
				},200)
				// this.title = options.title;
			}
			if (options.template) {
				this.placeholder = uni.getStorageSync('chattemplate');
				// this.title = options.title;
			}
		},
		methods: {
			updateText(content, i = 0) {
				var _this = this;
				var timer = ''; //定时器
				var temp = ""; //临时显示文本
				var index = 0; //初始下标为0
				timer = setInterval(function() {
					if (temp.length < content.length) { //如果比原始文本短
						temp += content[index] //就往临时显示文本添加一个字符
						index = index + 1; //下标+1
					} else { //清除定时器
						clearTimeout(timer);
					}
					_this.chats[i].answer = temp //将临时显示文本赋值到显示文本

				}, 100);
			},
			async submit() {
				if(this.chats[0].question == ''){
					return;
				}
				let content = this.chats[0].question;
				this.chats[0].answer = '我正在努力生成中......';
				// this.chats[0].question = "";
				uni.showLoading({
					title:'加载中...'
				})
				let data = await putQuestionsTo({
					function_id: this.function_id,
					content
				});
				uni.hideLoading();
				console.log(data);
				this.updateText(data.content);
			},
			copy(content) {
				let data = content.replace(/<br\/>/g,'\n')
				uni.setClipboardData({
					data,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: "none"
						});
					}
				});
			},
			parse(index) {
				let _this = this;
				uni.getClipboardData({
					success: function(data) {
						_this.chats[index].question = data.data;
					},
				});
			}

		}
	}
</script>

<style scoped>
	.content {
		background: linear-gradient(0deg, #CDF1F7, #BCDFFD, #CFDBFF);
		min-height: 100vh;
	}

	.card {
		min-height: 300upx;
		width: 690upx;
		margin: 0 auto;
		box-sizing: border-box;
		background-color: #e5edff;
		border-radius: 30upx;
		padding: 35upx;
	}

	.question {
		min-height: 260upx;
		padding: 32upx 44upx 15upx 32upx;
		box-sizing: border-box;
		border-radius: 30upx;
		background-color: #fff;
	}

	.question-content {
		height: 150upx;
		min-height: 150upx;
		width: 100%;
	}

	.question-option {
		height: 60upx;
		padding: 0 34upx;
		border: 1px solid #9887FF;
		color: #9887FF;
		border-radius: 30px;
	}

	.question-option.primary {
		background: #3E80E5;
		border-color: #3E80E5;
		color: #fff;
	}

	.answer {
		min-height: 200upx;
		padding: 69upx 44upx 79upx 32upx;
		box-sizing: border-box;
		border-radius: 30upx;
		background-color: #fff;
	}

	.answer-content {
		/* min-height: 116upx; */
		width: 100%;
	}

	.answer-option {
		height: 60upx;
		padding: 0 34upx;
		border: 1px solid #9887FF;
		color: #9887FF;
		border-radius: 30px;
	}

	.AI-img {
		position: absolute;
		width: 186upx;
		height: 222upx;
		top: -65upx;
		left: 9upx;
	}



	/* -------- */
	.relative {
		position: relative;
	}

	.p-t-30 {
		padding-top: 30upx;
	}

	.p-t-85 {
		padding-top: 85upx;
	}

	.m-t-26 {
		margin-top: 26upx;
	}

	.m-l-180 {
		margin-left: 180upx;
	}

	.m-t-34 {
		margin-top: 34upx;
	}

	.m-t-14 {
		margin-top: 14upx;
	}

	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.flex-1 {
		flex: 1;
	}

	.align-center {
		align-items: center;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.gap-16 {
		gap: 16upx;
	}

	.fs-32 {
		font-size: 32upx;
	}

	.fs-40 {
		font-size: 40upx;
	}

	.color-3E80E5 {
		color: #3E80E5;
	}

	.fs-26 {
		font-size: 26upx;
	}

	.color-CCCCCC {
		color: #CCCCCC;
	}
</style>